async function fetchVisualizationData(algorithm, inputData) {
    try {
        const response = await fetch('/visualize', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                algorithm: algorithm,
                data: inputData
            })
        });
        return await response.json();
    } catch (error) {
        console.error('获取可视化数据失败:', error);
        return null;
    }
}

class AlgorithmVisualizer {
    constructor() {
        // ... 原有初始化代码 ...
    }

    async processInput(data, key, algorithm) {
        // 获取后端数据
        const visualData = await fetchVisualizationData(algorithm, data);
        if (!visualData) return;

        // 渲染可视化效果
        this.renderVisualization(visualData);
    }

    renderVisualization(data) {
        // 清除现有可视化
        this.clearVisualization();

        // 根据算法类型渲染不同可视化
        switch(data.algorithm) {
            case 'aes':
                this.renderAES(data);
                break;
            case 'des':
                this.renderDES(data);
                break;
            // ... 其他算法 ...
        }
    }

    renderAES(data) {
        const container = document.getElementById('aes-visual');
        
        // 创建步骤可视化
        data.steps.forEach((step, index) => {
            const stepElement = document.createElement('div');
            stepElement.className = 'aes-step';
            stepElement.innerHTML = `
                <div class="step-number">${index + 1}</div>
                <div class="step-name">${step.name}</div>
                <div class="step-state">${step.state}</div>
            `;
            container.appendChild(stepElement);
        });
    }

    // ... 其他渲染方法 ...
}